<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>武汉不动产登记中心</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
		integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style>
		.form-control {
			display: inline-block;
			width: 50%;
		}

		.failed_span {
			background-color: rgba(242, 242, 242, 1);
		}

		.errorWrapper {
			display: flex;
			flex-flow: row;
			justify-content: center;
			align-content: center;
		}

		.tipsBox {
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-content: center;
		}

		.textLeft {
			text-align: left;
		}

		.textLeft:last-child {
			margin-bottom: 0;
		}
	</style>
</head>

<body>
	<div id="app">

		<div class="starter-template container" style="text-align: center;" v-show="show">
			<h3>请核实您的基本信息</h3>
			<form class="form-horizontal row">
				<div class="form-group col-sm-12">
					<label class="control-label">权利人姓名：</label>
					<input type="email" class="form-control" disabled="disabled" v-model="name" id="name">
				</div>
				<div class="form-group col-sm-12">
					<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;业&nbsp;务&nbsp;号：</label>
					<input type="email" class="form-control" disabled="disabled" v-model="busiNo" id="busiNo">
				</div>
				<div class="form-group col-sm-12">
					<label class="control-label">&nbsp;&nbsp;应缴金额：</label>
					<input type="email" class="form-control" disabled="disabled" v-model="money" id="money">
				</div>

				<div class="form-group">
					<label   class="col-sm-8 control-label">线上缴费暂时不提供发票，如需发票，请至柜台缴费</label>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<button type="button" v-on:click="butClick()" class="btn btn-default">确认缴费</button>
					</div>
				</div>
			</form>

		</div>

		<div id="ccbPage" class="clearfix" v-show="!show">
			<div id="error_main" class="border_box mb_0" align="center">
				<div style="display:none">
					<div class="text_error"></div>
				</div>
				<div class="failed_span">
					<div class="subwrap_fankui errorWrapper">
						<div class="imgBox">
							<img src="error.jpg">
						</div>
						<div class="content_fankui_message tipsBox">
							<p class="fs_16 fw_bold textLeft">尊敬的客户：</p>
							<p class="textLeft">{{msg}}</p>
						</div>
					</div>
				</div>

			</div>

		</div>




	</div>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					name: null,
					busiNo: null,
					money: null,
					url: null,
					show: false,
					msg: null
				}
			},
			methods: {
				getQueryString: function (name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
					var r = window.location.search.substr(1).match(reg);
					if (r != null) return unescape(r[2]); return null;
				},
				butClick: function () {
					window.location.href = this.url;
				}

			},
			mounted() {

				var ywh = this.getQueryString("ywh");
				var type = this.getQueryString("type");
				console.log(ywh);
				axios({
					//url: 'http://119.96.209.1:8080/cloud-client-app/api/h5pay/bdcJfQuery',
					url: 'http://localhost:8200/api/h5pay/bdcJfQuery',
					method: 'post',
					data: { ywh: ywh,type:type },
					headers: {
						'Content-Type': 'application/json;charset=utf-8'
					}
				})
					.then(respanse => {
						if (respanse.data.code == "0") {
							this.name = respanse.data.data.name;
							this.busiNo = respanse.data.data.busiNo;
							this.money = respanse.data.data.money;
							this.url = respanse.data.data.url;
							console.log(respanse.data);
							this.show = true;
						} else {
							this.show = false;
							this.msg = respanse.data.msg;
						}


					});



			}
		})
	</script>
</body>

</html>